<template>
  <van-row class="page-contact">
    <van-nav-bar
      left-text="返回"
      right-text="确定"
      title="选择接收人员"
      @click-left="$emit('onCancel')"
      @click-right="doConfirm"/>
    <van-row @click.native="goBack">
      <van-col span="1">
        <van-icon class-prefix="cspg" name="return" />
      </van-col>
      <van-col span="22" offset="1">
        {{currentDepart.substring(currentDepart.indexOf('/') + 1)}}
      </van-col>
    </van-row>
    <van-cell-group>
      <div v-if="showChildren != 1">
      <card-department
        v-for="(depart) in departments"
        :key="depart.id"
        :department="depart"
        @onClick="toSubDepart"/>
      </div>
      <card-person
        v-for="(person) in persons"
        :key="person.user_id"
        :person="person"
        :selected="selectPersons"/>
    </van-cell-group>
    <loading-overlay :show="isLoading"/>
  </van-row>
</template>

<script>
import CardDepartment from '@/views/common/card/CardDepartment'
import CardPerson from '@/views/common/card/CardPerson'
import { getDepartAndUsersByDepartPath } from '@/api/contact'
export default {
  name: 'PageContact',
  components: { CardDepartment, CardPerson },
  props: ['receivers', 'parentPath', 'showChildren'],
  data () {
    return {
      isLoading: false,
      departments: [],
      persons: [],
      selectedDept: this.$vo.createDepartment(),
      currentDepart: this.parentPath,
      selectPersons: this.receivers
    }
  },
  mounted () {
    this.doGetDepartAndUsersByDepartPath(this.currentDepart)
  },
  methods: {
    goBack () {
      if (this.currentDepart === this.parentPath) {
        // console.log('不存在上级部门')
        this.selectedDept = this.$vo.createDepartment()
        return
      }
      // console.log('返回上级部门')
      this.currentDepart = this.currentDepart.substr(0, this.currentDepart.lastIndexOf('/'))
      this.doGetDepartAndUsersByDepartPath(this.currentDepart)
    },
    toSubDepart (depart) {
      if (this.selectedDept.department_pathname !== depart.department_pathname) {
        this.doGetDepartAndUsersByDepartPath(depart.department_pathname)
      }
    },
    doConfirm () {
      this.$emit('onConfirm', this.selectPersons)
    },
    doGetDepartAndUsersByDepartPath (depPath) {
      this.isLoading = true
      getDepartAndUsersByDepartPath(depPath).then(res => {
        this.isLoading = false
        let { data } = res
        if (data[this.$response.CODE] === this.$response.SUCCESS) {
          this.selectedDept = this.$vo.createDepartment()
          if (data[this.$response.DATA].curr_depart) {
            this.currentDepart = data[this.$response.DATA].curr_depart.department_pathname
          } else {
            this.currentDepart = this.parentPath
          }
          this.departments = data[this.$response.DATA].depart_list
          this.persons = data[this.$response.DATA].user_list
        } else {
          this.$toast.fail('获取数据失败：' + data[this.$response.MESSAGE])
        }
      }, errFunc => {
        this.isLoading = false
        this.$notify('服务调用失败：' + errFunc.toString())
        console.log(errFunc.toString())
      })
    }
  }
}
</script>

<style scoped lang="less">
  .page-contact {
    .van-row {
      background-color: white;
      line-height: 40px;
      font-size: 12px;
      padding: 0px 16px;
      color: #3686e8;
    }
  }
</style>
